<template>
 <div class="gardItem"> 
   <div class="short"> </div>
   <div class="short"> </div>
   <div class="short"> </div>
   <div class="short"> </div>
   <div class="long"> </div>  
   <div class="number"> {{ num }} </div>  
 </div> 
</template>
<script> 
export default { 
  props:['num']
}
</script>
<style scoped> 
.gardItem{
  position: relative;
}
.long{
  width: 30px;
  height: 0px; 
  border: 1px solid #000;
  margin-top: 8px;
}
.short{
  width: 10px;
  height: 0px; 
  border: 1px solid #000;
  margin-top: 8px;
}
.number{
  position: absolute;
  text-align: right;
  top: 32px;
  width: 50px;

}

</style>